<!-- 可拖动dialog组件 -->
<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
    <div
      v-show="visible"
      class="el-dialog__wrapper"
      @click.self="handleWrapperClick"
    >
      <div
        :key="0"
        ref="dialog"
        role="dialog"
        aria-modal="true"
        :aria-label="title || 'dialog'"
        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, {'arrow-down-active': arrowDownActive}, customClass]"
        :style="style"
      >
        <div class="el-dialog__header cursor">
          <slot name="title">
            <span class="el-dialog__title">{{ title }}</span>
          </slot>
          <i class="el-icon-minus el-icon collapse" @click="handleCollapse" />
          <button
            v-if="showClose"
            type="button"
            class="el-dialog__headerbtn"
            aria-label="Close"
            @click="handleClose"
          >
            <i class="el-dialog__close el-icon el-icon-close" />
          </button>
        </div>
        <div v-if="rendered" class="el-dialog__body"><slot /></div>
        <div v-if="$slots.footer" class="el-dialog__footer">
          <slot name="footer" />
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'DragDialog',
  extends: window.ELEMENT.Dialog,
  data() {
    return {
      arrowDownActive: false
    }
  },
  mounted() {
    this.initDragDiag()
  },
  methods: {
    handleClose() {
      this.$emit('close-btn')
    },
    handleCollapse() {
      this.arrowDownActive = !this.arrowDownActive;
      this.$emit('diag-collapse', this.arrowDownActive)
    },
    /** 设置弹框拖动相关事件 */
    initDragDiag() {
      const diagWrapperEl = this.$el;
      const diagEl = diagWrapperEl.querySelector('.el-dialog');
      const diagHeaderEl = diagEl.querySelector('.el-dialog__header');

      this.handleMousemove = (ev) => {
        if (!this.dragActive) return;
        let left = ev.pageX - this.dragx
        let top = ev.pageY - this.dragy
        const el = diagEl.getBoundingClientRect();
        const maxLeft = window.innerWidth - el.width
        const maxTop = window.innerHeight - el.height

        left = left > maxLeft ? maxLeft : Math.max(0, left)
        top = top > maxTop ? maxTop : Math.max(0, top)
        diagEl.style.left = left + 'px';
        diagEl.style.top = top + 'px';
      }
      this.handleMousedown = (ev) => {
        this.dragActive = true;
        const el = diagHeaderEl.getBoundingClientRect()
        this.dragx = ev.pageX - el.left
        this.dragy = ev.pageY - el.top
        diagEl.style.margin = '0px'
        diagEl.style.left = el.left + 'px';
        diagEl.style.top = el.top + 'px';
      }
      this.handleMouseleave = (ev) => {
        this.dragActive = false
      }
      this.handleMouseup = (ev) => {
        this.dragActive = false
      }

      diagHeaderEl.addEventListener('mousedown', this.handleMousedown)
      document.addEventListener('mousemove', this.handleMousemove)
      diagWrapperEl.addEventListener('mouseup', this.handleMouseup)
      diagHeaderEl.addEventListener('mouseleave', this.handleMouseleave)

      this.$on('hook:beforeDestroy', () => {
        diagHeaderEl.removeEventListener('mousedown', this.handleMousedown)
        document.removeEventListener('mousemove', this.handleMousemove)
        diagWrapperEl.removeEventListener('mouseup', this.handleMouseup)
        diagHeaderEl.removeEventListener('mouseleave', this.handleMouseleave)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.cursor{
  cursor: move;
}
.el-dialog{
  &.arrow-down-active{
    .el-dialog__body, .el-dialog__footer{
      height: 0;
      padding: 0 20px!important;
      overflow: hidden;
    }
  }
  .el-dialog__body, .el-dialog__footer{
    transition: all .2s;
    padding-top: 0;
  }
}
.el-dialog__header{
  .collapse{
    position: absolute;
    top: 26px;
    right: 50px;
    cursor: pointer;
  }
}
</style>
